/* keyboard - demo CSS */
html, body, div, input, textarea {
 font-family: Verdana,Tahoma,Segoe,sans-serif;
 font-size: 14px;
}

body { background: #333; color: #ddd; height: 98%; margin: 0; padding: 0; }
a:link { color: #9fcdff; text-decoration: none; }
a:hover { color: #fff; }
a:visited,a:active { color: #53a5ff; }

#page-wrap { width: 900px; margin: 0 auto; height: 98%; min-height: 350px; }

h1, h2, h3, h4 { color: #ddd; text-align: center; }
h2 { margin: 5px; font-size: 130%; cursor: pointer; }

#nav { display: block; width: auto; text-align: center; white-space: nowrap; line-height: 3em; margin: 10px auto; }
#nav a { text-align: center; background: #000; color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; }
#nav a.git { background: #006; }
#nav a.play { background: #060; }
#nav a.issue { background: #600; }
#nav a:hover,#nav a.current{ background: #666; }

#switcher, #wrap { width: 150px; margin: 10px auto; }
#console { width: 800px; list-style-type: none; margin: 0 auto; padding: 0; }
#console li { text-align: center; }

.block { float: left; padding-left: 30px; margin-bottom: 30px; text-align: center; position: relative; }
.block2 { margin: 0 auto; text-align: center; }
textarea, input { width: 240px; background: #333; color: #ddd; border: #777 1px solid; padding: 5px 0; }
.hiddenInput { display: inline-block; width: 240px; }
.code { display: none; }

#showcode {
 display: none;
 background: #333;
 overflow: auto;
 width: 850px;
 border: #555 1px solid;
 z-index: 1;
}
#showcode pre {
 padding: 0 10px;
 text-align: left;
}
#showcode .ct { font-weight: 700; color: #9fcdff; }
#showcode .comment { color: #92d050; }

.clear { clear: both; }

/* used .alignRight instead of #num (for the number pad) here because the virtual keyboard
 strips IDs from the input - ID's are supposed to be unique! */
.alignRight { text-align: right; }

#footer { height: 150px; }
#footer2 { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 0; font-size: small; margin-bottom: 5px; text-align: center; }
#footer2 div { margin: 0 auto; width: 650px; }

/* tooltip (jatt) */
#tooltip {
 width: 250px;
 color: #dddddd;
 background: #444;
 border: 1px solid #777;
 padding: 8px;
 display: none;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align: left;
 border-radius: 1em;
 -moz-border-radius: 1em;
 -webkit-border-radius: 1em;
}